<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
    <link rel="stylesheet" th:href="@{assets/css/core.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/amazeui.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/menu.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/index.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/admin.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/page/typography.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/page/form.css}"/>
    <link rel="stylesheet" th:href="@{assets/css/component.css}"/>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>

    <link rel="stylesheet" th:href="@{http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css}">
    <script th:src="@{https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js}"></script>
    <script th:src="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js}"></script>

    <!-- Favicons -->
    <link th:href="@{img/favicon.png}" rel="icon">
    <link th:href="@{img/apple-touch-icon.png}" rel="apple-touch-icon">

    <!-- Bootstrap core CSS -->
    <link th:href="@{lib/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <!--external css-->
    <link th:href="@{lib/font-awesome/css/font-awesome.css}" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" th:href="@{lib/bootstrap-fileupload/bootstrap-fileupload.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{lib/bootstrap-datepicker/css/datepicker.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{lib/bootstrap-daterangepicker/daterangepicker.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{lib/bootstrap-timepicker/compiled/timepicker.css}"/>

    <!-- Custom styles for this template -->
    <link th:href="@{css/style.css}" rel="stylesheet">
    <link th:href="@{css/style-responsive.css}" rel="stylesheet">


</head>
<body  style="overflow-y:scroll;">

<input id="testArea" type="hidden" value=""></input><!--base64的字符-->
<input type="hidden" id="username" name="username"
       th:value="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}"/>  <!--隐藏框-->


<section id="container">
    <!--header start-->
    <header class="header black-bg" th:replace="headBar::myHeadBar">
    </header>
    <!--header end-->

    <!--sidebar start-->
    <aside th:replace="leftSideBar::myLeftBar">

    </aside>
    <!--sidebar end-->

    <!--right begin-->

    <!--main content start-->
    <!--main content start-->
    <section id="main-content" style="overflow-scrolling: auto">
        <section class="wrapper">
            <h3><i class="fa fa-angle-right"></i> 用户资料</h3>
            <div class="row" style="overflow-scrolling: auto">

                <!-- DATE TIME PICKERS -->
                <div class="row mt">
                    <div class="col-lg-12">
                        <div class="form-panel">
                            <h4><i class="fa fa-angle-right"></i>个人权限</h4>
                            <form class="form-horizontal  style-form" action="">
                                <div class="form-group">
                                    <label class="control-label col-md-3">上传主题</label>
                                    <div class="col-md-4">
                                        <input size="16" type="text" th:value="${addstr}" readonly class=" form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3"> 删除主题</label>
                                    <div class="col-md-4">
                                            <input type="text" class="form-control" th:value="${deletestr}" readonly  size="16">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">下载主题</label>
                                    <div class="col-md-4">

                                            <input type="text" class="form-control" th:value="${downloadstr}"  readonly="" size="16">


                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3">查看主题</label>
                                    <div class="col-md-4">

                                            <input type="text" class="form-control" th:value="${searchstr}" readonly  size="16">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /form-panel -->
                    </div>
                    <!-- /col-lg-12 -->
                </div>
                <!-- row -->
                <!--  TIME PICKERS -->
            <!--ADVANCED FILE INPUT-->
                <div class="row mt">
                <div class="col-md-12 mt">
                    <div class="form-panel">
                        <h4><i class="fa fa-angle-right"></i>头像修改</h4>
                        <form class="form-horizontal style-form" id="upload" enctype="multipart/form-data"
                              method="post">

                            <div class="form-group">

                                <div class="form-group last">
                                    <label class="control-label col-md-3"></label>
                                    <div class="col-md-9">
                                        <div class="fileupload fileupload-new" data-provides="fileupload">
                                            <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                                                <img src=" " id="testImg"
                                                     style="max-height: 300px; height: 8em; min-width:8em;"
                                                     class="img-circle img-thumbnail img-responsive"
                                                     alt=""/>
                                            </div>
                                            <div class="fileupload-preview fileupload-exists thumbnail"
                                                 style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                                            <div>
                        <span class="btn btn-theme02 btn-file">
                           <span class="fileupload-new"><i class="fa fa-paperclip"></i> 选择头像</span>
                           <span class="fileupload-exists"><i class="fa fa-undo"></i> 换一个</span>
                           <input type="file" class="default" id="testFile"/>
                        </span>
                                                <input id="btnTest" type="button" value="上传" class="btn-success"
                                                       style="height:35px;width:95px;display:inline-block;" >
                                            </div>


                                            </div>
                                        </div>
                                    </div>

                                </div>
                        </form>
                    </div>
                    <!-- /form-panel -->
                </div>
                <!-- /col-lg-12 -->
            </div>
            <!-- row -->
            </div>
        </section>
        <!-- /wrapper -->
    </section>
    <!-- /MAIN CONTENT -->
    <!--main content end-->

</section>


<!-- navbar -->
<a th:href="@{admin-offcanvas}" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
   data-am-offcanvas="{target: '#admin-offcanvas'}"><!--<i class="fa fa-bars" aria-hidden="true"></i>--></a>

<script type="text/javascript" th:src="@{assets/js/jquery-2.1.0.js}"></script>

<script type="text/javascript" th:src="@{assets/js/blockUI.js}"></script>

<script type="text/javascript" th:src="@{assets/js/amazeui.min.js}"></script>

<!--头像上传-->
<script type="text/javascript" th:inline="javascript">
  /*  $("#testPhone").click(function () {
        $("#testFile").click();
    });*/

    $("#testFile").change(function () {
        run(this, function (data) {
            $('#testImg').attr('src', data);
            $('#testArea').val(data);
            $("#btnTest").attr('disabled',false);
        });
    });

    $("#btnTest").click(function () {
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $(document).ajaxSend(function (e, xhr, options) {
            xhr.setRequestHeader(header, token);
        });

        var URL = [[@{
            /uploadImg}]];
            var username = $("#username").val();
            var fileInput = $('#testFile').get(0).files[0];

            if(fileInput==null||fileInput==" "){
               alert("请先选择头像！");
            }else{
               $.ajax({
                   url: URL,
                   type: "post",
                   dataType: "json",
                     data: {
                    "username": username,
                    "content": $.trim($("#testArea").val()),
                },
                  success: function (result) {
                    if (0 < parseInt(result)) {
                        alert("上传成功")
                        window.location.href = "/userInfo";
                    } else {
                        alert("上传失败，请重新上传！")
                    }

                    console.log(result);
                }
            });
            }
        }
    );

    function run(input_file, get_data) {
        /*input_file：文件按钮对象*/
        /*get_data: 转换成功后执行的方法*/
        if (typeof (FileReader) === 'undefined') {
            alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
        } else {
            try {
                /*图片转Base64 核心代码*/
                var file = input_file.files[0];
                //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
                if (!/image\/\w+/.test(file.type)) {
                    alert("请确保文件为图像类型");
                    $("#btnTest").attr("disabled", true);
                    return false;
                }
                $("#btnTest").attr("disabled", false);
                var reader = new FileReader();
                reader.onload = function () {
                    get_data(this.result);
                }
                reader.readAsDataURL(file);
            } catch (e) {
                alert('图片转Base64出错啦！' + e.toString())
            }
        }
    }
</script>


<script type="text/javascript" th:inline="javascript">
    $(function () {
        var URL = [[@{
            /headPic}]];
            $.ajax({
                type: "get",
                url: URL,
                data: {},
                success: function (data) {
                    console.log(data);
                    $("#headPic").attr("src", "data:image/gif;base64," + data);
                }
            });
        }
    );


</script>




<!--验证登陆者的主题主题上传权限-->

<script type="text/javascript" th:inline="javascript">
    $(function () {
        var URL = [[@{/checkPermission}]];
            var add="上传";
            $.ajax({
                type: "get",
                url: URL,
                data: {
                    action:add
                },
                success: function (data) {
                    console.log(data);
                    if (0 < parseInt(data)) {
                        $("#uploadTheme").show();
                    } else {

                        $("#uploadTheme").hide();
                    }
                }
            });
        }
    )


</script>

<!--验证登陆者的主题主题查看权限-->

<script type="text/javascript" th:inline="javascript">
    $(function () {
        var URL = [[@{/checkPermission}]];
            var view="查看";
            $.ajax({
                type: "get",
                url: URL,
                data: {
                    action:view
                },
                success: function (data) {
                    console.log(data);
                    if (0 < parseInt(data)) {
                        $("#viewTheme").show()
                    } else {

                        $("#viewTheme").hide()
                    }
                }
            });
        }
    )


</script>



<!--验证角色-->
<script type="text/javascript" th:inline="javascript">
    $(function () {
        var URL = [[@{
            /checkRole}]];
            $.ajax({
                type: "get",
                url: URL,
                data: {},
                success: function (data) {
                    console.log(data);
                    if (0 < parseInt(data)) {
                        var url = [[@{/user}]]
                            $("#myUser").html('<a href="'+url+'" >\n' +
                                '                        <i class="fa fa-desktop"></i>\n' +
                                '                        <span >用户管理</span>\n' +
                                '                    </a>');
                            // $("#userManager").show();
                        } else {
                            // $("#userManager").hide();
                        }
                    }
                });
        }
    )


</script>



<!-- js placed at the end of the document so the pages load faster -->
<script th:src="@{lib/jquery/jquery.min.js}"></script>
<script th:src="@{lib/bootstrap/js/bootstrap.min.js}"></script>
<script class="include" type="text/javascript" th:src="@{lib/jquery.dcjqaccordion.2.7.js}"></script>
<script th:src="@{lib/jquery.scrollTo.min.js}"></script>
<script th:src="@{lib/jquery.nicescroll.js}" type="text/javascript"></script>
<!--common script for all pages-->
<script th:src="@{lib/common-scripts.js}"></script>
<!--script for this page-->
<script th:src="@{lib/jquery-ui-1.9.2.custom.min.js}"></script>
<script type="text/javascript" th:src="@{lib/bootstrap-fileupload/bootstrap-fileupload.js}"></script>
<script type="text/javascript" th:src="@{lib/bootstrap-datepicker/js/bootstrap-datepicker.js}"></script>
<script type="text/javascript" th:src="@{lib/bootstrap-daterangepicker/date.js}"></script>
<script type="text/javascript" th:src="@{lib/bootstrap-daterangepicker/daterangepicker.js}"></script>
<script type="text/javascript" th:src="@{lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js}"></script>
<script type="text/javascript" th:src="@{lib/bootstrap-daterangepicker/moment.min.js}"></script>
<script type="text/javascript" th:src="@{lib/bootstrap-timepicker/js/bootstrap-timepicker.js}"></script>
<script th:src="@{lib/advanced-form-components.js}"></script>


</body>
</html>